﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商城管理平台-公益活动-发布活动</title>
	<link href="css/common.css" rel="stylesheet">
	<link href="css/ec.css" rel="stylesheet">
	<link href="css/list.css" rel="stylesheet">
	<script src="js/jquery-1.4.2.min.js"></script>
	<script src="js/ec.js"></script>
</head>
<body>
<!-- 主体 -->

<div class="tab set area price">
	<h3><a href="">商城管理平台</a><a href="">> 公益活动</a><a href="">> 发布活动</a></h3>

	<div class="tablist act">
		<!--<p class="actTitle">发布公益活动</p>-->
		<!-- 参与人员要求 -->
		<div class="attrBasis ">参与人员要求</div>
		<div class="message set borBtm">
			<table class="basis ask" cellpadding="0" cellspacing="0">
				<tr class="person">
					<td class="first">义工类型<span class="cred"> * </span></td>
					<td colspan="5">
						<div class="attrVal fl">
							<input id="joinAl1" name="join" type="radio" />
							<label for="joinAl1">全部</label>
						</div>
						<div class="attrVal fl">
							<input id="joinYoung" name="join" type="radio" />
							<label for="joinYoung">小义工</label>
						</div>
						<div class="attrVal fl">
							<input id="joinOld" name="join" type="radio" />
							<label for="joinOld">志愿者</label>
						</div>

					</td>
				</tr>
				<tr class="actPostInfo">
					<td class="first">年龄<span class="cred"> * </span></td>
					<td>
						<div class="actAsk">
							从 <input type="text" /> 岁
							到 <input type="text" /> 岁
						</div>
					</td>
					<td class="first">
						性别<span class="cred"> * </span>
					</td>
					<td class="actSelect">
						<div class="select">
							<input type="text" class="display">
							<select name="">
								<option>男</option>
							</select>
							<a href="" class="arrows">∨</a>
						</div>

					</td>
					<td class="first">
						等级<span class="cred"> * </span>
					</td>
					<td class="actSelect">
						<div class="select">
							<input type="text" class="display">
							<select class="star">
								<option>普通义工</option>
								<option>初级</option>
								<option>中级</option>
								<option>高级</option>
							</select>
							<a href="" class="arrows">∨</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="first"></td>
					<td colspan="5">
						<div class="actAlert">*志愿者16岁以上，小义工0-15岁，小义工没有星级的划分</div>
					</td>
				</tr>
			</table>
		</div>
		<!-- 带队人员要求 -->
		<div class="attrBasis">带队人员要求</div>
		<div class="message set borBtm">
			<table class="basis ask" cellpadding="0" cellspacing="0">
				<tr>
					<td class="first">年龄<span class="cred"> * </span></td>
					<td>
						<div class="actAsk">
							从 <input type="text" /> 岁
							到 <input type="text" /> 岁
						</div>
					</td>
					<td class="first">
						性别<span class="cred"> * </span>
					</td>
					<td class="actSelect">
						<div class="select">
							<input type="text" class="display">
							<select name="">
								<option>男</option>
							</select>
							<a href="" class="arrows">∨</a>
						</div>

					</td>
					<td class="first">
						等级<span class="cred"> * </span>
					</td>
					<td class="actSelect">
						<div class="select">
							<input type="text" class="display">
							<select>
								<option>普通义工</option>
								<option>初级</option>
								<option>中级</option>
								<option>高级</option>
							</select>
							<a href="" class="arrows">∨</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="first"></td>
					<td colspan="5">
						<label  class="attrVal fl"><input type="checkbox" />我是带队人</label>
						<div class="actAlert fl mr140">*年龄在16周岁以上</div>
					</td>
				</tr>
			</table>
		</div>
		<!-- 活动定义 -->
		<div class="attrBasis">活动定义</div>
		<div class="message set">
			<table class="basis" cellpadding="0" cellspacing="0">
				<tr>
					<td class="first">活动主题<span class="cred"> * </span></td>
					<td><input type="text" /></td>
					<td class="first">获得工时数<span class="cred"> * </span></td>
					<td><input type="text" /></td>
					<td class="first">活动开始时间<span class="cred"> * </span></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td class="first">活动结束时间<span class="cred"> * </span></td>
					<td><input type="text" /></td>
					<td class="first">报名开始时间<span class="cred"> * </span></td>
					<td><input type="text" /></td>
					<td class="first">报名结束时间<span class="cred"> * </span></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td class="first">费用类型<span class="cred"> * </span></td>
					<td colspan="5" class="standard">
						<div class="attrVal fl">
							<input id="free" name="pay" type="radio" />
							<label for="free">免费</label>
						</div>
						<div class="attrVal fl">
							<input id="pay" name="pay" type="radio" />
							<label for="pay">付费</label>
						</div>
					</td>
				</tr>
				<tr class="hide actPost-costInfo">
					<td class="first"></td>
					<td colspan="5">
						<div class="fl">
							<ul class="costInfo-ul">
								<li class="active"><span class="fl">个人</span></li>
								<li><span class="fl">家庭</span></li>
							</ul>
						</div>
						<div class="fl costInfo-rule">
							<!-- 个人 -->
							<div class="rule">
								<div class="rulePay">
									<span class="fl first">费用</span>
									<input class="ruleInput" type="text">
									<span>元</span>
								</div>
								<div class="rulePay">
									<span class="fl first mt10">费用说明</span>
									<textarea class="ruleText"></textarea>
								</div>

							</div>
							<!-- 家庭 -->
							<div class="rule hide">
								<div class="fl ruleDiv">
									<div class="fl rulePeople">
										<span class="fl first">一大一小</span>
										<input class="ruleInput" type="text">
										<span>元</span>
									</div>
									<div class="fl rulePeople">
										<span class="fl first">一大两小</span>
										<input class="ruleInput" type="text">
										<span>元</span>
									</div>
									<div class="fl rulePeople">
										<span class="fl first">两大一小</span>
										<input class="ruleInput mt30" type="text">
										<span>元</span>
									</div>
									<div class="fl rulePeople">
										<span class="fl first">两大两小</span>
										<input class="ruleInput" type="text">
										<span>元</span>
									</div>
								</div>
								<div class="fr">
									<span class="fl first mt10">费用说明</span>
									<textarea class="ruleMin"></textarea>
								</div>
							</div>
						</div>
					</td>
				</tr>
			</table>
			<table class="basis" cellpadding="0" cellspacing="0">
				<tr>
					<td class="first">项目类型<span class="cred"> * </span></td>
					<td colspan="2">
						<input type="text" class="display">
						<select name="">
							<option>敬老助残</option>
						</select>
						<a href="" class="arrows">∨</a>
					</td>
					<td class="first">活动区域<span class="cred"> * </span></td>
					<td class="actSelect">
						<input type="text" class="display">
						<select class="province" >
							<option>请选择</option>
						</select>
						<a href="" class="arrows">∨</a>
					</td>
					<td class="actSelect">
						<input type="text" class="display">
						<select class="city">
							<option>请选择</option>
						</select>
						<a href="" class="arrows">∨</a>
					</td>
				</tr>
				<tr>
					<td class="first">活动详细地址<span class="cred"> * </span></td>
					<td colspan="5"><input type="text" /></td>
				</tr>
				<tr>
					<td class="first">活动简介<span class="cred"> * </span></td>
					<td colspan="5">
						<div class="payDesc"><div class="projDescDiv"><script id="editor" name="paymentRefundDesc" type="text/plain"></script></div></div>
						<input type="button" value="点击显示/隐藏内容" class="payBtn uploadBtn  ml0">
					</td>
				</tr>
			</table>
			<table class="basis" cellpadding="0" cellspacing="0">
				<tr>
					<td class="first">群聊二维码<span class="cred"> * </span></td>
					<td colspan="2">
						<input type="text" readonly="readonly" class="uploadTxt">
						<input  value="上传" class="uploadBtn">
					</td>
					<td class="first">列表图片<span class="cred"> * </span></td>
					<td colspan="2">
						<input type="text" readonly="readonly" class="uploadTxt">
						<input  value="上传" class="uploadBtn">
						<div class="actAlert fl actPhoto">*要求的尺寸360px*240px，大小不超过300k</div>
					</td>
				</tr>
				<tr>
					<td class="first">详情页轮播图<span class="cred"> * </span></td>
					<td colspan="5">
						<input type="text" readonly="readonly" class="uploadTxt">
						<input  value="上传" class="uploadBtn">
						<div class="actAlert fl actPhoto">*要求的尺寸360px*240px，大小不超过300k</div>
					</td>
				</tr>
				<tr>
					<td class="first">详情页轮播图<span class="cred"> * </span></td>
					<td colspan="5">
						<input type="text" readonly="readonly" class="uploadTxt">
						<input  value="上传" class="uploadBtn">
						<div class="actAlert fl actPhoto">*要求的尺寸360px*240px，大小不超过300k</div>
					</td>
				</tr>
				<tr>
					<td class="first"></td>
					<td colspan="5">
						<input  value="添加多张轮播图" class="uploadBtn carousel ml0">
					</td>
				</tr>
			</table>
		</div>
		<p class="save" style="margin-bottom: 30px">
			<input type="submit" value="发布活动" class="red">
		</p>
	</div>
</div>
<script type="text/javascript" charset="utf-8" src="../plugin/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../../ueditor/ueditor.all.js"> </script>
<script type="text/javascript" src="js/district.js"> </script>
<script>
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    // 活动简介 点击事件
    $(".payBtn").click(function () {
        $('.payDesc').slideToggle("slow");
    });
    //    付费家庭是否可选，默认是
    var person = true;
    // 参与人员要求
    $('.person .attrVal').each(function () {
        $(this).on('click',function () {
            var attr = $(this).find("input").attr('com.project.common.web.utils.id');
            $(this).find("input").attr('checked','checked');
            if(attr=="joinYoung"){
                $(this).parents('.person').next('.actPostInfo').find('.star').attr('disabled','disabled');
                $(this).parents('.person').next('.actPostInfo').find('.star').css("background-color","#eee");
            }else {
                $(this).parents('.person').next('.actPostInfo').find('.star').removeAttr('disabled');
                $(this).parents('.person').next('.actPostInfo').find('.star').css("background-color","#fff");
            }
//            选择全部义工
            if(attr=="voltAll"){
                person = true;      // 付费家庭可选
            }else{
                person = false;     // 付费家庭不可选
            }
        });
    });
    //    免费，付费
    $('.standard .attrVal').each(function () {
        $(this).on('click',function () {
            var id = $(this).find('input').attr('com.project.common.web.utils.id');
            if (id=='pay'){
                $('.actPost-costInfo').removeClass('hide');
            }else{
                $('.actPost-costInfo').addClass('hide');
            }
        })
    });
    //    个人，家庭
    $('.costInfo-ul li').each(function (index) {
        $(this).on('click',function () {console.log('11');
            var num = index;
            if (person){ // 义工类型为全部
				$(this).addClass('active');
				$(this).siblings().removeClass('active');
				$('.rule').each(function (index) {
					if (num===index){
						$(this).removeClass('hide');
						$(this).siblings().addClass('hide');
					}
				});
            }else if(num==0){ // 义工类型为小义工或志愿者 选择个人 '
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
                $('.rule').each(function (index) {
                    if (num===index){
                        $(this).removeClass('hide');
                        $(this).siblings().addClass('hide');
                    }
                });
                $(this).siblings().find('input').prop('disabled','disabled');

            }else{ // 选择家庭
                $(this).find('input').prop('disabled','disabled');
            }
        })
    });
//    点击添加轮播图
	$('.carousel').on('click',function () {
	    var html = '<tr><td class="first"></td><td colspan="5">'+
            '<input type="text" readonly="readonly" class="uploadTxt">'+
            '<input  value="上传" class="uploadBtn">'+
            '<div class="actAlert fl actPhoto">*要求的尺寸360px*240px，大小不超过300k</div></td></tr>';
		$(this).parents('tr').prev().after(html)
    })
    // 省
    var province = $('.province option:checked').text();
    // 市
    var city = $('.city option:checked').text();
</script>
</body>
</html>